import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { Form, Button } from 'antd'
import ContentBox from 'components/contentBox'
import Filters from 'components/common/filters'
import CustomTable from 'components/common/table'
import { widgetType } from 'constants'
import PropTypes from 'prop-types'
import { getPriceFilter } from 'utils/utils'

import Style from './list.css'

class ListForm extends Component {
  static propTypes = {
    form: PropTypes.object,
    getUserList: PropTypes.func,
    userData: PropTypes.object,
    router: PropTypes.object
  }
  constructor (props) {
    super(props)
    this.state = {
      pageNo: 1,
      pageSize: 20,
      params: {}
    }
    this.search = this.search.bind(this)
    this.reset = this.reset.bind(this)
    this.onPageChange = this.onPageChange.bind(this)
    this.onShowSizeChange = this.onShowSizeChange.bind(this)
  }

  reset (custom) {
    if (custom === 'custom') {
      const { form } = this.props
      form.resetFields()
    }
    this.setState({
      pageNo: 1,
      pageSize: 20,
      params: {}
    })
    this.props.getUserList({
      pageNo: 1,
      pageSize: 20
    })
  }
  search (values = {}) {
    if (values === 'custom') {
      const { form } = this.props
      form.validateFields((err, items) => {
        if (!err) {
          values = items
        }
      })
    }
    const { pageSize, pageNo } = this.state
    values.pageNo = pageNo
    values.pageSize = pageSize
    this.setState({
      params: values
    })
    this.props.getUserList(values)
  }

  onPageChange (pageNo, pageSize) {
    const { params } = this.state
    params.pageNo = pageNo
    params.pageSize = pageSize
    this.setState({
      pageNo
    })
    this.props.getUserList(params)
  }

  onShowSizeChange (current, pageSize) {
    this.setState({
      pageSize
    })
    const { params } = this.state
    params.pageNo = current
    params.pageSize = pageSize
    this.props.getUserList(params)
  }

  handleView (id) {
    this.props.router.push(`/users/manage/user-details/${id}`)
  }

  handleEdit (id) {}

  getFilterCols () {
    return [
      {
        label: '请输入',
        id: 'userId',
        widget: widgetType.input,
        placeholder: '请输入用户Id/手机号'
      }, {
        label: '用户名称',
        id: 'name',
        widget: widgetType.input,
        placeholder: '请输入用户名称'
      },
      {
        label: false,
        key: 'custom',
        widget: 'custom',
        render: () => {
          return (
            <>
              <Button type='primary' style={{ marginRight: 16 }} onClick={() => this.search('custom')}>查询</Button>
              <Button onClick={() => this.reset('custom')}>重置</Button>
            </>
          )
        },
        span: 8
      }
    ]
  }

  getTableCols () {
    return [
      {
        title: '用户ID',
        dataIndex: 'userId',
        key: 'userId',
        width: 100
      },
      {
        title: '用户名称',
        dataIndex: 'name',
        key: 'name',
        width: 100
      },
      {
        title: '用户等级',
        dataIndex: 'memberLevel',
        key: 'memberLevel',
        width: 100
      },
      {
        title: '消费总金额',
        dataIndex: 'consumptionAmount',
        key: 'consumptionAmount',
        render: (text, record) => {
          return `¥${getPriceFilter(text)}`
        },
        width: 100,
        sorter: (a, b) => a.consumptionAmount - b.consumptionAmount
      },
      {
        title: '订单总数量',
        dataIndex: 'orderCount',
        key: 'orderCount',
        width: 100,
        sorter: (a, b) => a.orderCount - b.orderCount
      },
      {
        title: '可用积分',
        dataIndex: 'residueIntegration',
        key: 'residueIntegration',
        width: 100,
        sorter: (a, b) => a.residueIntegration - b.residueIntegration
      },
      {
        title: '邀请好友',
        dataIndex: 'invitedCount',
        key: 'invitedCount',
        width: 100,
        sorter: (a, b) => a.invitedCount - b.invitedCount
      },
      {
        title: '操作',
        dataIndex: 'a',
        key: 'a',
        render: (text, record) => {
          return <>
            <a onClick={() => this.handleView(record.userId)}>查看</a>
            {/* <a onClick={() => this.handleEdit(record.userId)}>编辑</a> */}
          </>
        },
        width: 100
      }
    ]
  }

  componentDidMount () {
    const { pageSize, pageNo } = this.state
    this.props.getUserList({
      pageSize,
      pageNo
    })
  }

  render () {
    const { pageNo, pageSize } = this.state
    const { form, userData } = this.props
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: userData && userData.total,
      onChange: this.onPageChange,
      pageSize,
      onShowSizeChange: this.onShowSizeChange

    }
    return (
      <>
        <ContentBox>
          <div className={Style['users-manage-list']}>
            <Filters cols={this.getFilterCols()} form={form} search={this.search} reset={this.reset} actions={false} />
            <CustomTable loading={!userData} columns={this.getTableCols()} dataSource={(userData && userData.userList) || []} pagination={pagination} />
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  userData: state.users.userData
})
const mapDispatch = dispatch => ({
  getUserList: dispatch.users.getUserList
})
const List = Form.create()(ListForm)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(List)
)
